<!-- 树形层级选择器-->
<!-- 1、支持单选、多选 -->
<template>
	<view class="model-item">
		<view class="model-row flex-between">
			<view class="model-left" @click="switchItem">
				<view :class="['row-icon flex-center', rowItem.isOpen ? 'arrow-down' : 'arrow-right']">
					<u-icon v-if="rowItem.children && rowItem.children.length" name="arrow-down-fill"></u-icon>
					<text v-else class="dot-icon"></text>
				</view>
				<text class="model-label">{{rowItem.label}}</text>
			</view>
			<label class="model-right"  v-if="canSelect()" @click="checkedRow">
				<radio style="transform: scale(0.8);" :value="`${parent.id}-${rowItem.id}`" :checked="rowItem.isChecked"/>
			</label>
		</view>
		<view v-show="boo.isOpen" class="model-child">
			<view class="child-row flex-between" v-for="item in rowItem['children']" :key="item.id">
				<view class="model-left">
					<view :class="['row-icon flex-center', item.isOpen ? 'arrow-down' : 'arrow-right']">
						<text class="dot-icon"></text>
					</view>
					<text class="model-label">{{item.label}}</text>
				</view>
				<label class="model-right" @click="checkedItem(item)">
					<radio style="transform: scale(0.8);" :value="`${parent.id}-${rowItem.id}-${item.id}`" :checked="item.isChecked"/>
				</label>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			row: [Object],
			parent: [Object],
			selectParent: [Boolean]
		},
		watch: {
			row: {
				handler(val){
					let _self = this
					if(val){
						_self.rowItem = val
						_self.boo.isOpen = val['isOpen'] || false
					}
				},
				immediate: true,
			},
		},
		data() {
			return {
				boo: {
					isOpen: false,
				},
				rowItem: {}
			}
		},
		mounted() {
			let _self = this
		},
		methods: {
			canSelect(){
				let _self = this, {children = []} = this.rowItem, boo = Boolean
				if(_self.selectParent){
					boo = true
				}else{
					if(children.length){
						boo = false
					}else{
						boo = true
					}
				}
				return boo
			},
			switchItem(){
				let _self = this
				_self.$set(_self.boo, 'isOpen', _self.boo.isOpen ? false : true)
				_self.$set(_self.rowItem, 'isOpen', _self.boo.isOpen)
				_self.$emit('row-open', _self.rowItem)
			},
			checkedRow(){
				let _self = this, {label, id} = _self.rowItem
				_self.$set(_self.rowItem, 'isChecked', _self.rowItem.isChecked ? false : true)
				if(_self.rowItem.isChecked){
					_self.$set(_self.rowItem, 'isOpen', _self.boo.isOpen)
					_self.$set(_self.rowItem, 'checkedIdArr', [_self.parent, {label, id}])
				}else{
					delete _self.rowItem['checkedIdArr']
				}
				_self.$emit('row-change', _self.rowItem)
			},
			checkedItem(item){
				let _self = this, {label, id} = _self.rowItem
				_self.$set(item, 'isChecked', item.isChecked ? false : true)
				if(item.isChecked){
					_self.$set(_self.rowItem, 'isOpen', _self.boo.isOpen)
					_self.$set(item, 'checkedIdArr', [_self.parent, {label, id}, {label: item.label, id: item.id}])
				}else{
					delete item['checkedIdArr']
				}
				_self.$emit('row-change', item)
			},
		},
	}
</script>

<style scoped lang="scss">
	.model-item{
		margin-bottom: 24rpx;
		line-height: 48rpx;
		.model-left{
			position: relative;
			padding-left: 46rpx;
			flex: 1;
			.row-icon{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 0;
				transition: .3s;
				&.arrow-right{
					transform: translateY(-50%) rotate(-90deg);
				}
				.dot-icon{
					display: block;
					width: 16rpx;
					height: 16rpx;
					background-color: #606266;
					border-radius: 50%;
				}
			}
			.model-label{
				font-size: 28rpx;
				color: rgba(0,0,0,.85);
			}
		}
		.model-child{
			margin-top: 20rpx;
			margin-left: 30rpx;
			.child-row{
				margin-top: 20rpx;
			}
		}
	}
</style>
